<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    //当图片比较大的时候, 如果使用这样的方式绘图, 那么图片可能会完全覆盖画布
    //语法: CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )
    var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';
    var img = new Image(); // 就是 img 标签
    // 设置 src 属性为 图片
    img.src = url;

    // 绘图
    /*img.onload = function () {
        //该方法绘制的图像会在指定范围内被压缩显示.
        ctx.drawImage( img, 100, 100 , 100 ,100);
    };*/

    //如果希望正常显示, 需要固定一个宽度或者高度, 然后根据比例计算出另一个值. 这里假定高度是 100. 计算宽度后绘图.
    var width;
    img.onload = function () {
        width = img.width * 100 / img.height;
        ctx.drawImage( img, 100, 100, width, 100 );
    };
</script>
</body>
</html>